<template>
  <a-spin :spinning="spinning">
    <page-header-wrapper
      v-if="!submitSuccess"
      :tabList="tabList"
      :tab-active-key="activeKey"
      :tab-change="handleTabChange"
    >
      <template #content>申请编号：{{ reportData.ApplyNO }}</template>
      <a-row v-show="activeKey === $route.params.type" :gutter="24" type="flex" class="commonViews-audit">
        <a-col :span="16" class="left-wrapper">
          <a-card :bordered="false">
            <a-descriptions title="调查报告" :class="{ 'border-bottom': activeKey !== 'community' }">
              <a-descriptions-item label="现住房性质">{{ reportData.HousProperties }}</a-descriptions-item>
              <a-descriptions-item label="现住房产权人姓名">{{ reportData.HousProperty }}</a-descriptions-item>
              <a-descriptions-item label="现住房建筑面积㎡">{{ reportData.BurveyBuildArea }}㎡</a-descriptions-item>
              <a-descriptions-item label="现住房实际居住人数">{{ reportData.BurveyNumber }}</a-descriptions-item>
              <a-descriptions-item label="申请保障人数">{{ reportData.BurveyVfyNumber }}</a-descriptions-item>
              <a-descriptions-item label="自有产权房个人产权面积㎡"
                >{{ reportData.BurveyAreaPer }}㎡</a-descriptions-item
              >
              <a-descriptions-item label="家庭人均月收入">{{ reportData.BurveyIncome }}元</a-descriptions-item>
              <a-descriptions-item label="现住房是否用于测算人均住房建筑面积" :span="2">{{
                reportData.BurveyIfTestArea
              }}</a-descriptions-item>
              <a-descriptions-item label="备注" :span="3">{{ reportData.BeviewRemark || '无' }}</a-descriptions-item>
              <a-descriptions-item label="调查人">{{ reportData.BeviewAgent }}</a-descriptions-item>
              <a-descriptions-item label="调查时间">
                {{ reportData.BeviewDate | moment('YYYY-MM-DD') }}
              </a-descriptions-item>
            </a-descriptions>
            <div class="content">
              <div v-show="activeKey === 'leader'">
                <leader-opinion class="p-y-16 p-r-16" @submit="handleSubmitSuccess"></leader-opinion>
              </div>
              <div
                v-show="activeKey === 'city' || activeKey === 'leader'"
                :class="{ 'border-bottom': activeKey === 'leader' }"
              >
                <city-opinion
                  class="p-y-16 p-r-16"
                  @submit="handleSubmitSuccess"
                  :type="activeKey === 'city' ? 'form' : 'info'"
                ></city-opinion>
              </div>
              <div v-show="activeKey === 'cityReceive'" :class="{ 'border-bottom': activeKey === 'leader' }">
                <city-receive-opinion
                  class="p-y-16 p-r-16"
                  @submit="handleSubmitSuccess"
                  :type="activeKey === 'cityReceive' ? 'form' : 'info'"
                ></city-receive-opinion>
              </div>
              <a-row
                type="flex"
                style="flex: 1"
                :class="{ 'border-bottom': activeKey === 'city' || activeKey === 'leader' }"
              >
                <a-col v-show="activeKey !== 'community'" :span="12">
                  <district-opinion
                    :type="activeKey === 'district' ? 'form' : 'info'"
                    :reportData="reportData"
                    class="p-16"
                    @submit="handleSubmitSuccess"
                  ></district-opinion>
                </a-col>
                <a-col
                  :span="activeKey === 'community' ? 24 : 12"
                  :class="{ 'border-left': activeKey !== 'community' }"
                >
                  <community-opinion
                    :type="activeKey === 'community' ? 'form' : 'info'"
                    class="p-y-16 p-l-16"
                    :reportData="reportData"
                    @submit="handleSubmitSuccess"
                  ></community-opinion>
                </a-col>
              </a-row>
            </div>
            <!-- <div>
              <p class="title m-b-24">保障成员名单</p>
              <a-table
                rowKey="ID"
                size="middle"
                :columns="$store.state.user.sfsq == '是' ? assurePhoneColumns : assureColumns"
                :data-source="assureInformation.proposerdetail"
                :pagination="false"
                :expandIconColumnIndex="6"
                :expandIconAsCell="false"
                :expandIcon="expandIcon"
              >
                <span slot="index" slot-scope="text, record, index">{{ index + 1 }}</span>
                <span slot="phone" slot-scope="text, record">
                  <a-input-search v-model="record.Phones" placeholder="请输入电话号码">
                    <a-popconfirm
                      title="您确定修改此电话号码？"
                      slot="enterButton"
                      ok-text="是"
                      cancel-text="否"
                      @confirm="eaitPhone(record, record.Phones)"
                      @cancel="cancel"
                    >
                      <a href="#">确定</a>
                    </a-popconfirm>
                  </a-input-search>
                </span>
                <a-tag slot="Sexs" slot-scope="text">{{ text }}</a-tag>
                <span slot="Relation" slot-scope="text">{{ text | $lable(Relation) }}</span>

                <a-descriptions slot="expandedRowRender" slot-scope="record" size="small" :column="4">
                  <a-descriptions-item label="姓名">{{ record.Name }}</a-descriptions-item>
                  <a-descriptions-item label="身份证号">{{ record.IDCards }}</a-descriptions-item>
                  <a-descriptions-item label="性别">{{ record.Sexs }}</a-descriptions-item>
                  <a-descriptions-item label="出身日期">{{
                    record.Birthdays | moment('YYYY-MM-DD')
                  }}</a-descriptions-item>
                  <a-descriptions-item label="民族">{{ record.Nations | $lable(Nation) }}</a-descriptions-item>
                  <a-descriptions-item label="关系">{{ record.Relation | $lable(Relation) }}</a-descriptions-item>
                  <a-descriptions-item label="文化程度">{{ record.College | $lable(College) }}</a-descriptions-item>
                  <a-descriptions-item label="婚姻状况">{{ record.Maritalstas }}</a-descriptions-item>
                  <a-descriptions-item label="联系电话">{{ record.Phones }}</a-descriptions-item>
                  <a-descriptions-item label="就业情况">{{ record.Employment }}</a-descriptions-item>
                  <a-descriptions-item label="工作单位">{{ record.WorkUnits }}</a-descriptions-item>
                  <a-descriptions-item label="职业">{{ record.Profession | $lable(Profession) }}</a-descriptions-item>
                  <a-descriptions-item label="居住地址" :span="2">{{
                    `贵州省贵阳市${record.LiveDistrictAddress}${record.LiveAddresss}`
                  }}</a-descriptions-item>
                  <a-descriptions-item label="是否残疾" :span="record.IfDisabilitys === '否' ? 2 : 1">{{
                    record.IfDisabilitys
                  }}</a-descriptions-item>
                  <a-descriptions-item label="残疾类型" v-if="record.IfDisabilitys === '是'">{{
                    record.DisabilityTypes | $lable(DisabilityType)
                  }}</a-descriptions-item>
                  <a-descriptions-item label="残疾等级" v-if="record.IfDisabilitys === '是'">{{
                    record.DisabilityLevels | $lable(DisabilityLevel)
                  }}</a-descriptions-item>
                  <a-descriptions-item label="户籍信息">{{ record.ApplyTypes }}</a-descriptions-item>
                  <a-descriptions-item label="申请人所属群体">
                    <a-tag v-for="item in getGroupsArr(record.GroupOfApplicants)" :key="item">{{ item }}</a-tag>
                  </a-descriptions-item>
                  <a-descriptions-item label="收入认定">{{ assureInformation.ApplyClass }}</a-descriptions-item>
                  <a-descriptions-item label="低保证号" v-if="assureInformation.ApplyClass === '低保'">{{
                    record.LowObjectNOs
                  }}</a-descriptions-item>
                  <a-descriptions-item label="户籍地址">
                    {{ record.ProvinceAddress }}{{ record.CityAddress }}{{ record.DistrictAddress
                    }}{{ record.CensusRegAddresss }}
                  </a-descriptions-item>
                </a-descriptions>
              </a-table>
            </div>
            <div>
              <p class="title m-y-24">未纳入保障成员名单</p>
              <a-table
                rowKey="ID"
                size="middle"
                :columns="unAssureColumns"
                :data-source="assureInformation.proposerfdetail"
                :pagination="false"
              >
                <span slot="index" slot-scope="text, record, index">{{ index + 1 }}</span>
                <span slot="FRelation" slot-scope="text">{{ text }}</span>
              </a-table>
            </div> -->
          </a-card>
        </a-col>
        <a-col :span="8" class="right-wrapper">
          <a-card :bordered="false">
            <p class="title fz-20">温馨提示</p>
            <a-carousel autoplay>
              <viewer-image
                class="carousel-img"
                fit="cover"
                :lazy="false"
                src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi.loli.net%2F2018%2F06%2F07%2F5b18e530d3035.jpg&refer=http%3A%2F%2Fi.loli.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1663898007&t=06f78235b085f37552f0acfc9df38179"
              ></viewer-image>
              <viewer-image
                class="carousel-img"
                fit="cover"
                :lazy="false"
                src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.1ppt.com%2Fuploads%2Fallimg%2F2106%2F1_210620173108_1.jpg&refer=http%3A%2F%2Fimg.1ppt.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1663898007&t=03c9a0a04f816e94fea52354c063df84"
              ></viewer-image>
            </a-carousel>
            <div class="terms">
              <p>（一）无正当理由连续6个月以上未在所承租的保障性住房内居住的；</p>
              <p>（二）累计6个月以上未缴纳租金的；</p>
              <p>（三）不再具备租赁保障性住房条件，经催告拒绝退出的；</p>
              <p>（四）擅自转让、转租、出借或者抵押保障性住房的；</p>
              <p>（五）损毁、破坏保障性住房，擅自改变房屋用途、结构和配套设施，或者不当使用造成重大损失的；</p>
              <p>（六）已另行购买或者通过继承、赠予等方式获得住房的；</p>
              <p>（七）全部家庭成员户籍均迁出本地的；</p>
              <p>（八）法律、法规规定和合同约定的其他情形.</p>
              <p>
                我单位将不定期对本小区的保障家庭进行随机入户抽查，经举报或抽查核实保障家庭存在以上违规行为的，我单位将按照住房保障有关法律、法规规定，进行严肃处理。
              </p>
              <p>望各保障家庭积极配合，谢谢！</p>
            </div>
          </a-card>
        </a-col>
      </a-row>
      <info v-show="activeKey === 'info'" :applyNO.sync="applyNO" />
    </page-header-wrapper>
    <transition enter-active-class="zoom_in">
      <a-card :bordered="false" v-if="submitSuccess">
        <a-result status="success" title="审核成功" :sub-title="subTitle">
          <template #extra>
            <y-button type="success" @click="handleClose">关闭当前页面</y-button>
          </template>
        </a-result>
      </a-card>
    </transition>
  </a-spin>
</template>

<script>
import { viewerImage } from '@/components'
import cityOpinion from './components/cityOpinion'
import cityReceiveOpinion from './components/cityReceiveOpinion'
import communityOpinion from './components/communityOpinion'
import { getDeptDropList, subsidycalculation } from '@/api/communityReviewManagement'
import { getNewProposerbyID, getDropdownList, Set_ProposerPhone } from '@/api/common'
import districtOpinion from './components/districtOpinion'
import info from './components/info'
import leaderOpinion from './components/leaderOpinion'
import { validNumber } from '@/utils/validate'

// import { getNewProposerbyID } from '@/api/common'
const findItem = (data, value, key = 'DROPKEY', label = 'DROPVALUE') => {
  if (validNumber(value)) {
    value = Number(value)
  }
  const item = data.find((e) => e[key] === value)
  if (!item) return ''
  return item[[label]]
}
export default {
  name: 'cityComplexInquireList',
  components: {
    viewerImage,
    cityOpinion,
    communityOpinion,
    info,
    cityReceiveOpinion,
    districtOpinion,
    leaderOpinion,
  },
  provide() {
    return {
      proposerData: () => this.reportData,
      handleClose: this.handleClose,
    }
  },
  data() {
    return {
      tabList: [{ key: 'info', tab: '保障用户基本信息' }],
      assureInformation: {},
      activeKey: 'community',
      spinning: false,
      applyNO: '',
      reportData: {},
      Relation: [
        {
          DROPKEY: 0,
          DROPVALUE: '申请人',
        },
      ],
      submitSuccess: false,
      assureColumns: [
        {
          title: '序号',
          key: 'index',
          width: 80,
          align: 'center',
          scopedSlots: { customRender: 'index' },
        },
        {
          title: '姓名',
          dataIndex: 'Name',
          align: 'center',
        },
        {
          title: '性别',
          dataIndex: 'Sexs',
          align: 'center',
          scopedSlots: { customRender: 'Sexs' },
        },
        {
          title: '身份证号',
          key: 'IDCards',
          dataIndex: 'IDCards',
          align: 'center',
        },
        {
          title: '户籍信息',
          dataIndex: 'ApplyTypes',
          align: 'center',
        },
        {
          title: '与申请人关系',
          dataIndex: 'Relation',
          align: 'center',
          scopedSlots: { customRender: 'Relation' },
        },
        {
          title: '操作',
          align: 'center',
          // dataIndex: 'Relation',
          // width: '180px',
          // fixed: 'right',
          // scopedSlots: { customRender: 'action' },
          scopedSlots: { customRender: 'Relation' },
        },
      ],
      assurePhoneColumns: [
        {
          title: '序号',
          key: 'index',
          width: 80,
          align: 'center',
          scopedSlots: { customRender: 'index' },
        },
        {
          title: '姓名',
          dataIndex: 'Name',
          align: 'center',
        },
        {
          title: '性别',
          dataIndex: 'Sexs',
          align: 'center',
          scopedSlots: { customRender: 'Sexs' },
        },
        {
          title: '身份证号',
          key: 'IDCards',
          dataIndex: 'IDCards',
          align: 'center',
        },
        // {
        //   title: '电话号码',
        //   dataIndex: 'Phones',
        //   align: 'center',
        //   scopedSlots: { customRender: 'phone' },
        // },
        {
          title: '户籍信息',
          dataIndex: 'ApplyTypes',
          align: 'center',
        },
        {
          title: '与申请人关系',
          dataIndex: 'Relation',
          align: 'center',
          scopedSlots: { customRender: 'Relation' },
        },
        {
          title: '操作',
          align: 'center',
          // dataIndex: '',
          // width: '180px',
          // fixed: 'right',
          scopedSlots: { customRender: 'Relation' },
        },
      ],
      unAssureColumns: [
        {
          title: '序号',
          width: 80,
          align: 'center',
          scopedSlots: { customRender: 'index' },
        },
        {
          title: '姓名',
          dataIndex: 'FName',
          align: 'center',
        },
        {
          title: '身份证号',
          dataIndex: 'FIDCard',
          align: 'center',
        },
        {
          title: '户籍信息',
          dataIndex: 'Category',
          align: 'center',
        },
        {
          title: '与申请人关系',
          dataIndex: 'FRelation',
          scopedSlots: { customRender: 'FRelation' },
          align: 'center',
        },
      ],
    }
  },
  created() {
    const tabList = [
      { key: 'community', tab: '社区服务中心意见' },
      { key: 'district', tab: '区住房和城乡建设局意见' },
      { key: 'city', tab: '市住房和城乡建设局意见' },
      { key: 'cityReceive', tab: '市住房和城乡建设局意见' },
      { key: 'leader', tab: '市住房和城乡建设局意见' },
    ]
    const type = this.$route.params.type

    this.tabList.push(tabList.find((e) => e.key === type))
    this.activeKey = type
    this.fetchData()
  },
  filters: {
    $lable(value, data, key, label) {
      return findItem(data, value, key, label)
    },
  },
  methods: {
    expandIcon(props) {
      if (props.expanded) {
        return (
          // 在这里渲染你想要的展开收起按钮类型
          <y-button
            type="link"
            onClick={(e) => {
              props.onExpand(props.record, e)
            }}
          >
            收起
          </y-button>
        )
      } else {
        return (
          // 在这里渲染你想要的展开收起按钮类型
          <y-button
            type="link"
            onClick={(e) => {
              props.onExpand(props.record, e)
            }}
          >
            查看
          </y-button>
        )
      }
    },
    subTitle() {
      let str = ''
      switch (this.$route.params.type) {
        case 'district':
          str = '区级审核成功'
          break
        case 'city':
          str = '市级审核成功'
          break
        case 'cityReceive':
          str = '市级审核成功'
          break
        case 'leader':
          str = '主任审批成功'
          break
        default:
          str = '社区审核成功'
          break
      }
      return str
    },
    fetchData() {
      this.spinning = true
      const getNewProposer = getNewProposerbyID({
        ProposerID: this.$route.params.id || this.proposerID,
      })
      const getDeptList = getDeptDropList({ userid: this.$store.getters.userid })
      const getNation = getDropdownList({ PmKey: 'Nation' })
      const getRelation = getDropdownList({ PmKey: 'Relation' })
      const getCollege = getDropdownList({ PmKey: 'College' })
      const getProfession = getDropdownList({ PmKey: 'Profession' })
      const getDisabilityType = getDropdownList({ PmKey: 'DisabilityType' })
      const getDisabilityLevel = getDropdownList({ PmKey: 'DisabilityLevel' })
      const getGroups = getDropdownList({ PmKey: 'Groups' })
      const getNewProposerbyId = getNewProposerbyID({ ProposerID: this.$route.params.id })

      Promise.all([
        getNewProposer,
        getDeptList,
        getNation,
        getRelation,
        getCollege,
        getProfession,
        getDisabilityType,
        getDisabilityLevel,
        getGroups,
        getNewProposerbyId,
      ])
        .then((res) => {
          this.assureInformation = res[0]
          // this.$emit('update:applyNO', res[0].ApplyNO)
          this.DeptList = res[1][0].children
          this.Nation = res[2]
          this.Relation.push(...res[3])
          this.College = res[4]
          this.Profession = res[5]
          this.DisabilityType = res[6]
          this.DisabilityLevel = res[7]
          this.Groups = res[8]
          this.reportData = res[9]
          this.computedSubsidy()
        })
        .finally(() => {
          this.spinning = false
        })
      // getNewProposerbyID({ ProposerID: this.$route.params.id })
      //   .then((res) => {
      //     this.reportData = res
      //   })
      //   .finally(() => {
      //     this.spinning = false
      //   })
    },
    handleTabChange(key) {
      this.activeKey = key
    },
    handleSubmitSuccess() {
      this.submitSuccess = true
      switch (this.$route.params.type) {
        case 'community':
          this.$eventBus.$emit('primaryAuditRefresh')
          break
        case 'district':
          this.$eventBus.$emit('districtAuditRefresh')
          break
        case 'city':
          this.$eventBus.$emit('cityAuditRefresh')
          break
        case 'cityReceive':
          this.$eventBus.$emit('cityAuditRefresh')
          break
        case 'leader':
          this.$eventBus.$emit('leaderAuditRefresh')
          break
        default:
          break
      }
    },
    getGroupsArr(GroupOfApplicants) {
      const labelArr = []
      if (!this.$isEmpty(this.Groups) && !this.$isEmpty(GroupOfApplicants)) {
        GroupOfApplicants = GroupOfApplicants.split(',').forEach((e) => {
          this.Groups.forEach((item) => {
            if (item.DROPKEY === Number(e)) {
              labelArr.push(item.DROPVALUE)
            }
          })
        })
      }
      return labelArr
    },
    computedSubsidy() {
      // const data = this.form.getFieldsValue(['CityVfyNumber', 'ApplyClass', 'CityVfyAreaPer', 'HousCategory'])
      const { CityVfyNumber: Number, CityVfyAreaPer: dMaxArea, ApplyClass } = this.assureInformation
      if (this.assureInformation.ApplyClass === '低保' || this.assureInformation.ApplyClass === '低收入') {
        this.oldSMoney = this.subsidyForm.getFieldValue('SMoney') || 0
        subsidycalculation({
          config: {
            Number,
            dMaxArea,
            coefficient: ApplyClass === '低收入' ? 0.5 : 1,
          },
        }).then((res) => {
          const { dConst, Number, dMaxArea, iMonth, coefficient, money } = res.data
          this.subsidyForm.setFieldsValue({
            SMoney: money,
            SVarConst: dConst,
            SVarNumber: Number,
            SVarArea: dMaxArea,
            SVarMonth: iMonth,
            SVarPercent: coefficient,
          })
        })
      }
    },
    handleClose() {
      this.submitSuccess = true
      this.$nextTick(() => {
        this.submitSuccess = false
      })
      this.$multiTab.closeCurrentPage()
    },
  },
}
</script>
<style lang="less">
.commonViews-audit {
  .ant-descriptions-item-content {
    color: #000 !important;
  }
}
</style>
<style lang="less" scoped>
.left-wrapper,
.right-wrapper {
  /deep/ .ant-card {
    height: 100%;
  }
}
.left-wrapper {
  .border-bottom {
    border-bottom: 1px solid #e8e8e8;
  }
  .border-left {
    border-left: 1px solid #e8e8e8;
  }
  /deep/.ant-card-body {
    height: 100%;
    display: flex;
    flex-flow: column;
    .content {
      flex: 1;
      display: flex;
      flex-flow: column;
    }
  }
}
.right-wrapper {
  .terms {
    margin-top: 10px;
    font-weight: bold;
    line-height: 20px;
    p {
      &:nth-child(n + 9) {
        text-indent: 2em;
      }
    }
  }
}
.carousel-img {
  width: 100%;
  height: 200px;
  border-radius: 10px;
}
</style>
